<script setup>
const currentCode = ref("hot");
const itemList = [
  {
    title: "热门下载",
    tagCode: "hot",
  },
  {
    title: "消费级产品",
    tagCode: "consumer",
  },
  {
    title: "专业级产品",
    tagCode: "professional",
  },
];
const changeCode = async (tagCode) => {
  if (tagCode === currentCode.value) return;
  currentCode.value = tagCode;
};
</script>
<template>
  <div class="bg-[#f5f5f5]" style="min-height: calc(100vh - 264px)">
    <div class="w-screen border-b bg-[#eee] fixed z-[88] top-[64px]">
      <ul class="h-[46px] max-w-screen-lg mx-auto flex">
        <li
          v-for="item in itemList"
          class="h-[45px] mr-[40px] leading-[45px] cursor-pointer ml-[10px] lg:ml-[0px]"
          @click="changeCode(item.tagCode)"
          :class="{
            'border-b-[2px] border-[#999] border-solid':
              currentCode === item.tagCode,
          }"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
    <Container top="130" class="px-[5px]">
      <DownHot v-if="currentCode === 'hot'"></DownHot>
      <DownConsumer v-else-if="currentCode === 'consumer'"></DownConsumer>
      <DownProfessional v-else></DownProfessional>
    </Container>
  </div>
</template>
<style scoped lang="scss"></style>
